<template>
	<view class="tabbarPagePet">
		<view class="tabbarPagePetTop">
			<view class="petListItem" v-for="(item,index) in petList" :key="index" @tap="goDetails(item)">
				<view class="itemTop">
					<view class="itemTopLeft">
						<image class="itemTopLeftImg" :src="item.head"></image>
						<view class="itemTopLeftRight">
							<text class="itemTopLeftRightTop">{{item.nickname}}</text>
							<text class="itemTopLeftRightText">生日：{{item.birth_date}}</text>
							<text class="itemTopLeftRightText" v-if="item.sex==1">性别：囡囡</text>
							<text class="itemTopLeftRightText" v-if="item.sex==2">性别：仔仔</text>
							<text class="itemTopLeftRightText">种类：{{item.breed}}</text>
						</view>
					</view>
					<view class="itemTopRight" v-if="item.card_code=='0'">未绑定</view>
					<view class="itemTopRight statusText" v-else>已绑定</view>
				</view>
				<view class="itemGang"></view>
				<view class="itemBottom">
					<view class="itemBottomLeft">
						<view class="itemBottomLeftDiv" v-for="(itom,indox) in item.record_list" :key="indox">
							<text class="itemBottomLeftLeft">{{itom.date.split(' ')[0]}}</text>
							<view class="itemBottomLeftRight">
								<image :src="itom.icon" class="itemBottomLeftRightImg"></image>
								<text class="itemBottomLeftRightText">{{itom.desc}}</text>
							</view>
						</view>
						<!-- <view class="itemBottomLeftDiv">
							<text class="itemBottomLeftLeft">2023年10月4号</text>
							<view class="itemBottomLeftRight">
								<image src="../../static/pet/bwl.png" class="itemBottomLeftRightImg"></image>
								<text class="itemBottomLeftRightText">驱虫</text>
							</view>
						</view> -->

					</view>
					<view class="itemBottomRight" @tap.stop="goMemorandumList(item)">
						<image class="bwlImg"
							src="https://chongwu.aitaoba.net/storage/uploads/20231118/38a9c27b09838d4342f9d37678f3236f.png">
						</image>
						<text class="bwlText">备忘录</text>
					</view>
				</view>
			</view>
			<!-- <view class="petListItem">
				<view class="itemTop">
					<view class="itemTopLeft">
						<image class="itemTopLeftImg"></image>
						<view class="itemTopLeftRight">
							<text class="itemTopLeftRightTop">旺财</text>
							<text class="itemTopLeftRightText">生日：2015年9月21日</text>
							<text class="itemTopLeftRightText">性别：仔仔</text>
							<text class="itemTopLeftRightText">种类：金毛</text>
						</view>
					</view>
					<view class="itemTopRight statusText">已绑定</view>
				</view>
				<view class="itemGang"></view>
				<view class="itemBottom">
					<view class="itemBottomLeft">
						<view class="itemBottomLeftDiv">
							<text class="itemBottomLeftLeft">2023年10月4号</text>
							<view class="itemBottomLeftRight">
								<image src="../../static/pet/bwl.png" class="itemBottomLeftRightImg"></image>
								<text class="itemBottomLeftRightText">驱虫</text>
							</view>
						</view>
						<view class="itemBottomLeftDiv">
							<text class="itemBottomLeftLeft">2023年10月4号</text>
							<view class="itemBottomLeftRight">
								<image src="../../static/pet/bwl.png" class="itemBottomLeftRightImg"></image>
								<text class="itemBottomLeftRightText">驱虫</text>
							</view>
						</view>

					</view>
					<view class="itemBottomRight">
						<image class="bwlImg" src="../../static/pet/bwl.png"></image>
						<text class="bwlText">备忘录</text>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 是否已经购买防丢卡弹窗 -->
		<view class="retrievedPopDiv" v-if="isBuyState" @tap="isBuyState=false">
			<view class="deletePopLi"
				style="background: url('https://chongwu.aitaoba.net/storage/uploads/20231118/40b56d200638ef85cb80ad2e0762d364.png') no-repeat;background-size: 100% 100%;">
				<text class="deletePopLiTopText">{{msg}}</text>
				<!--  @tap="isBuyState=false" -->
				<button class="qxButton" @click="isBuyState = false">取消</button>
				<button class="qxButton qrButton" @click="handleSkipIndex">确认</button>
				<!-- @tap="isBuyState" -->
			</view>
		</view>

		<button class="addPetButton" @tap="addPetFun">添加宠物</button>
	</view>
</template>

<script>
	import {
		getPetList
	} from '@/api/pet.js'
	import {
		isBuyCar
	} from '@/api/shoppingMall.js'
	export default {
		components: {

		},
		data() {
			return {
				petList: [],
				isBuyState: false,
				msg: '',
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 获取宠物列表
			this.getPetList();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {
			// 跳转首页
			handleSkipIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 是否购买防丢卡
			isBuy() {
				isBuyCar({}).then(res => {
					this.msg = res.msg
					if (res.code == 200) this.isBuyState = true
				})
			},

			// 获取宠物列表
			getPetList() {
				getPetList({}).then((res) => {
					console.log(res, '宠物列表')
					if (res.code == 200) {
						this.petList = res.data;
						this.isBuy()
					}
				}).catch()
			},
			// 添加宠物
			addPetFun() {
				uni.navigateTo({
					url: "/pages/addPet/addPet"
				})
			},
			// 去详情
			goDetails(item) {
				// if(e==1){
				// 	uni.navigateTo({
				// 		url:"/pages/scanpetDetails/scanpetDetails"
				// 	})
				// }else{
				// 	// 去普通宠物详情
				// 	uni.navigateTo({
				// 		url:"/pages/petDetails/petDetails"
				// 	})
				// }
				// 去普通宠物详情
				console.log(item, 'iiiiiiiiiiiiiii')
				uni.navigateTo({
					url: "/pages/petDetails/petDetails?item=" + encodeURIComponent(JSON.stringify(item))
				})

			},
			// 去备忘录
			goMemorandumList(item) {
				uni.navigateTo({
					url: "/pages/memorandumList/memorandumList?item=" + JSON.stringify(item)
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.retrievedPopDiv {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 5;
	}

	.retrievedPopLi {
		width: 750rpx;
		height: 808rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightTransition 0.1s ease-in-out;
	}

	.deletePopLi {
		width: 750rpx;
		height: 780rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightDelete 0.1s ease-in-out;
	}

	.deletePopLiTopText {
		width: 578rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		text-align: center;
		position: absolute;
		left: 86rpx;
		top: 334rpx;
		z-index: 7;
	}

	.qxButton {
		width: 300rpx;
		height: 88rpx;
		background: #F1F2F6;
		border-radius: 20rpx;
		outline: none;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		left: 64rpx;
		top: 553rpx;
		z-index: 7;

	}

	.qrButton {
		background: #FED24C;
		left: 386rpx;
	}

	@keyframes heightDelete {
		0% {
			height: 0;
		}

		50% {
			height: 390rpx;
		}

		100% {
			height: 780rpx;
		}
	}

	@keyframes heightTransition {
		0% {
			height: 0;
		}

		50% {
			height: 404rpx;
		}

		100% {
			height: 808rpx;
		}
	}








	.tabbarPagePet {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tabbarPagePetTop {
		width: 100%;
		height: 257rpx;

		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0px 0px 0px 0px;
		padding-top: 40rpx;
		padding-left: 30rpx;
		box-sizing: border-box;

	}

	.petListItem {
		width: 690rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 29rpx 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

	}

	.itemTop {
		display: flex;
		justify-content: space-between;
	}

	.itemTopLeft {
		display: flex;
		align-items: center;

	}

	.itemTopLeftImg {
		width: 200rpx;
		height: 200rpx;
		background: #FFFCEF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.itemTopLeftRight {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		padding-top: 11rpx;
		box-sizing: border-box;
	}

	.itemTopLeftRightTop {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.itemTopLeftRightText {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #7E7E7E;
		margin-top: 10rpx;
	}

	.itemTopRight {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #C0C0BF;
		margin-top: 20rpx;
	}

	.itemGang {
		width: 630rpx;
		height: 1rpx;
		background: #D6D6D6;
		// margin-left: rpx;
		margin-top: 30rpx;
	}

	.itemBottom {
		width: 100%;
		height: 146rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.itemBottomLeft {
		display: flex;
		flex-direction: column;

	}

	.itemBottomLeftDiv {
		display: flex;

		margin-bottom: 12rpx;
	}

	.itemBottomLeftLeft {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.itemBottomLeftRight {
		display: flex;
		align-items: center;
		margin-left: 65rpx;
	}

	.itemBottomLeftRightImg {
		width: 28rpx;
		height: 28rpx;
	}

	.itemBottomLeftRightText {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		margin-left: 7rpx;
	}

	.itemBottomRight {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bwlImg {
		width: 44.77rpx;
		height: 42.78rpx;

	}

	.bwlText {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.statusText {
		color: #FFB531;
	}

	.addPetButton {
		width: 690rpx;
		height: 88rpx;
		background: #FED24C;
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;

		justify-content: center;
		align-items: center;
		outline: none;
		position: fixed;
		left: 30rpx;
		bottom: 144rpx;
		z-index: 3;
	}
</style>